// Account/index.jsx
import React from "react";
import { Input, Button, Toast } from "zarm";
import { createForm } from "rc-form";
import Header from "@/components/Header";
import { post } from "@/utils";

import s from "./style.module.less";
import { List } from "zarm";

const Account = (props) => {
  // Account 通过 createForm 高阶组件包裹之后，可以在 props 中获取到 form 属性
  const { getFieldProps, getFieldError } = props.form;
  // 提交修改方法
  const submit = () => {
    // validateFields 获取表单属性元素
    props.form.validateFields(async (error, value) => {
      // error 表单验证全部通过，为 false，否则为 true
      if (!error) {
        console.log(value);
        if (value.newpass != value.newpass2) {
          Toast.show("新密码输入不一致");
          return;
        }
        await post("/user/modify_pass", {
          old_pass: value.oldpass,
          new_pass: value.newpass,
          new_pass2: value.newpass2,
        });
        Toast.show("修改成功");
      }
    });
  };

  return (
    <>
      <Header title="重制密码" />
      <div className={s.account}>
        <div className={s.form}>
          <List>
            <List.Item title="原密码" style={{ padding: 10}}>
              <Input
                clearable
                type="text"
                placeholder="请输入原密码"
                {...getFieldProps("oldpass", { rules: [{ required: true }] })}
              />
            </List.Item>
            <List.Item title="新密码" style={{ padding: 10}}>
              <Input
                clearable
                type="text"
                placeholder="请输入新密码"
                {...getFieldProps("newpass", { rules: [{ required: true }] })}
              />
            </List.Item>
            <List.Item title="确认密码" style={{ padding: 10}}>
              <Input
                clearable
                type="text"
                placeholder="请再此输入新密码确认"
                {...getFieldProps("newpass2", { rules: [{ required: true }] })}
              />
            </List.Item>
          </List>
        </div>
        <Button className={s.btn} block theme="primary" onClick={submit}>
          提交
        </Button>
      </div>
    </>
  );
};

export default createForm()(Account);
